<script setup lang="ts">
import { nextTick, onMounted, ref } from 'vue'
import request from '@/utils/request'

import { ElMessage, ElMessageBox } from 'element-plus'

interface Screenshots {
  name: string
  path: string
  size: string
  type: string
  mtime: string

}

const tableRowClassName = ({ row, rowIndex }: { row: Screenshots; rowIndex: number }) => {
  if (rowIndex === 1) {
    return 'warning-row'
  } else if (rowIndex === 3) {
    return 'success-row'
  }
  return ''
}

const tableData = ref<Screenshots[]>([])

const getScreenshotsPageList = () => {
  request(`/admin/screenshots`).then((data) => {
    tableData.value = data
  })
}

onMounted(() => {
  getScreenshotsPageList()
})

const dialogAddFormVisible = ref(false)
const dialogEditFormVisible = ref(false)

const editPageRef = ref(null)


/**
 * 删除
 * @param index
 * @param id
 */
const handleDelete = (index: number, id: string) => {
  ElMessageBox.confirm('确认要删除这个文件吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    /*request(`/admin/delete/${id}`, {}, 'DELETE').then(() => {
      ElMessage.success('删除操作成功')
    })*/
  })
}

/**
 * 下载
 * @param index
 * @param id
 */
const handleDownload = (index: number, id: string) => {

}
</script>

<template>
  <el-card class="box-card" shadow="never">
    <template #header>
      <div class="card-header">
        <el-button @click="dialogAddFormVisible = true">导出</el-button>
      </div>
    </template>
    <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">

      <el-table-column prop="name" label="文件名称" width="200" />
      <el-table-column prop="path" label="路径" />
      <el-table-column prop="size" label="大小" />
      <el-table-column prop="type" label="类型" />
      <el-table-column prop="mtime" label="时间" />
      <el-table-column label="操作" width="250">
        <template #default="scope">
          <el-button
            size="small"
            @click="handleDownload(scope.$index, scope.row.id)"
            plain
            type="success"
          >下载</el-button
          >

          <el-button
            size="small"
            type="danger"
            plain
            @click="handleDelete(scope.$index, scope.row.id)"
          >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <el-dialog v-model="dialogAddFormVisible" title="xxx" width="90%">

  </el-dialog>
  <el-dialog v-model="dialogEditFormVisible" title="xxx" width="90%">

  </el-dialog>
</template>

<style scoped>
.el-table .warning-row {
  --el-table-tr-bg-color: #fabdcc;
}

.el-table .success-row {
  --el-table-tr-bg-color: #8febe1;
}
</style>
